<template>
  <!-- to用来设置router-link被点击时设置的路由链接 -->
  <!-- 开发中如果直接给自定义组件添加class,style属性 这些class style会直接绑定给自定义组件模板最外层的标签 -->
 <van-button type="default" :replace="true" :to="path" @click="clickAction" class="van-button-bgc">
   <i class="iconfont" :class="className"></i>
      <div class="txt">{{ title }}</div>
 </van-button>
</template>

<script>
export default {
  name: "TabBarItem",
  data:function(){
    return {

    }
  },
  props: ["className", "title","path"],
  methods:{
    clickAction(){
      this.$emit("changeIndex");
    }
  },
};
</script>

<style scoped lang="less">
i{
  font-size:20px;/*no*/
}
.normal{
  color:#ccc;
}
.select{
  color:red
}
.van-button-bgc {
  background: #f4f4f4;
}
.van-button-bgc:active::before{
  opacity: 0;
}
</style>
